/**
 * Created by Administrator on 2017/3/14 0014.
 */
import React from "react";
import { Checkbox,message } from 'antd';
import { Switch } from 'antd';
import Confirm from "../../common/Confirm";
import PeopleItem from "./PeopleItem"
import ReactKey from "../../util/ReactKey"
import Pagination from "./Pagination"
import Util from "../../util/Util"
import UserDisabledMutation from "./mutation/UserDisabledMutation"
import Relay from "react-relay";

/*导出组件*/
export default class PeopleDetail extends React.Component{
    constructor(props){
        super(props);
        this.state={
            peopleData:[],
            ischecked:false,
            totalresult:0,
        };
        this.uidlist=[];
        this.userdisable = [];
        this.enterpriseId = sessionStorage.getItem('enterpriseId');
    }
    componentWillMount(){
        this.style = {
            title_1:{
                display:'inline-block',
                width:65,
                height:38,
                paddingLeft:'10px',
                lineHeight:'36px',
            },
            title_11:{
                fontFamily:'新宋体',
                fontWeight:'600',
                color:'#333',
                fontSize:'14px',
                paddingLeft:'5px'
            },
            title_12:{
                width:13,
                height:13,
                borderRadius:'2px',
                border:'1px solid #666'
            },
            title_2:{
                display:'inline-block',
                width:119,
                height:38,
                textAlign:'center',
                lineHeight:'36px',
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            title_3:{
                display:'inline-block',
                width:130,
                height:38,
                textAlign:'center',
                lineHeight:'36px',
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            title_4:{
                display:'inline-block',
                width:130,
                height:38,
                textAlign:'center',
                lineHeight:'36px',
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            title_5:{
                display:'inline-block',
                width:180,
                height:38,
                textAlign:'center',
                lineHeight:'36px',
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            title_6:{
                display:'inline-block',
                width:196,
                height:38,
                textAlign:'center',
                lineHeight:'36px',
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            title_7:{
                display:'inline-block',
                width:200,
                height:38,
                textAlign:'center',
                lineHeight:'36px'
            },
            title_71:{
                fontFamily:'新宋体',
                color:'#333',
                fontSize:'14px'
            },
            page_ensure:{
                width:'39px',
                height:'19px',
                backgroundColor:"white",
                border:'1px solid #e7e6e6',
                borderRadius:'2px',
                color:"#999"
            }
        }
        this.setState({
            // peopleData:this.props.peopleData||[]
        })
    }

    //全选
    handleclick(is){
        this.uidlist=[];
        if(is){
            this.state.peopleData.map((context,index)=>{
                this.refs['pitem'+index].checkischose();
                this.refs['pitem'+index].int=0
                this.uidlist.push(this.refs['pitem'+index].uid)
            });
        }else{
            this.state.peopleData.map((context,index)=>{
                this.refs['pitem'+index].checkisunchose();
                this.refs['pitem'+index].int=1
            });
        }
        this.props.getchosepeople(this.uidlist)
        // console.warn(this.uidlist.join(','));
    }
    isallclick(uid){
        let total = 0;
        if(this.uidlist.indexOf(uid)<0){
            this.uidlist.push(uid);
        }else{
            Util.removedarrayitem(this.uidlist,uid)
        }
        this.state.peopleData.map((context,index)=>{
            total = total+this.refs['pitem'+index].int;
        });
        if(total!=0){
            this.refs.allcheck.unchose();
        }
        this.props.getchosepeople(this.uidlist)
    }

    onSure(size,num){
        this.props.serchpeople(size,num)
    }
    
    initpagenum(){
        this.uidlist=[];
        this.refs.pagination.setState({
            text:1
        });
    }

    //停用
    forbiddenandstart(is,index,uid){
        let status;
        if(is){
            this.refs['pitem'+index].setState({
                status:1
            });
            status = 1
        }else{
            this.refs['pitem'+index].setState({
                status:0
            });
            status =0
        }
        Relay.Store.commitUpdate(
            new UserDisabledMutation({
                enterpriseId: this.enterpriseId,
                status:status,
                ids: uid
            }),
            {
                onFailure: ()=>{

                },
                onSuccess: (response)=>{
                    let errorCode = response.userDisabled.userDisabled.errorCode;
                    if(errorCode == 0){
                        this.refs['pitem'+index].switchcontrol(is);
                        if(is){
                            message.success("启用成功");
                        }else{
                            message.success("禁用成功");
                        }
                    }
                }
            }
        );
    }

    
    render(){
        this.datasize = this.state.peopleData.length;
        return (<div>
                    <table style={{width:"100%",borderCollapse:"collapse",border:"1px solid #ededed"}}>
                        <thead>
                            <tr style={{height:"40px",background:"#f2f2f2"}} className="people_tab--hea___option">
                                <AllCheckbox  handleclick={this.handleclick.bind(this)} ref={'allcheck'}/>
                                <th style={{width:119,borderRight:"1px solid #ededed"}}>会员名称</th>
                                <th style={{width:110,borderRight:"1px solid #ededed"}}>部门</th>
                                <th style={{width:110,borderRight:"1px solid #ededed"}}>职务</th>
                                <th style={{width:160,borderRight:"1px solid #ededed"}}>手机号</th>
                                <th style={{width:182,borderRight:"1px solid #ededed"}}>邮箱</th>
                                <th style={{width:86,borderRight:"1px solid #ededed"}}>编辑</th>
                                <th style={{width:86,borderRight:"1px solid ededed"}}>启用/禁用</th>
                            </tr>
                        </thead>
                        <tbody className="people_tab--body___item">
                            {
                                this.state.peopleData.map((ele,index)=>{
                                        return <PeopleItem ele = {ele} key={ ReactKey.key } ref={'pitem'+index} isallclick={this.isallclick.bind(this)} index={index} forbiddenandstart={this.forbiddenandstart.bind(this)} editstaffinfo={this.props.editstaffinfo}/>
                                    }
                                )
                            }
                        </tbody>
                    </table>
                        {/*循环输出详细的人员数据*/}
                    <div className="people_pageContaine">
                        <Pagination eachSize={10} dataSize={this.state.totalresult} onSure={this.onSure.bind(this)} ref={'pagination'} />
                    </div>
                </div>
        )
    }
}

class AllCheckbox extends React.Component{
    constructor(props){
        super(props)
        this.state={
            ischecked:false
        }
    }

    unchose(){
        this.setState({
            ischecked:false
        });
    }

    handleclick(e){
        let is = e.target.checked;
        this.setState({
            ischecked:is
        });


        this.props.handleclick(is);
    }

    render(){
        return(
            <th style={{width:40,borderRight:"1px solid #ededed"}}><Checkbox onClick={this.handleclick.bind(this)} checked={this.state.ischecked}></Checkbox></th>
        );
    }
}